<template>
    <!--动态内容-->
    <div class="dynamic-mini-container  bac-container">
        <div v-if="layout == 2" class="dynamic-big-image">
            <el-image :src="dynamic.imageList[0]" fit="cover" @click="openDetails"></el-image>
        </div>
        <div class="dynamic-title" @click="openDetails">
            <el-tag type="warning" size="mini" effect="plain" v-if="dynamic.typeName">{{dynamic.typeName}}
            </el-tag>
            {{dynamic.title}}
        </div>
        <div class="dynamic-mini-container-body">
            <div v-if="layout == 1 && dynamic.imageList[0] != undefined" class="dynamic-small-image">
                <el-image :src="dynamic.imageList[0]" fit="cover" @click="openDetails"></el-image>
            </div>
            <div v-if="layout == 3" class="dynamic-medium-image">
                <el-image v-for="(url,index) in dynamic.imageList" :key="index" :src="url" fit="cover"
                          v-if="index < 4" @click="openDetails"></el-image>
            </div>
            <div class=" goods-item-attribute" v-if="layout == 1 ">
                <!--表格-->
                <ul v-if="dynamic.attributeList.length > 0">
                    <li v-for="(attribute,index) in dynamic.attributeList" v-if="index < 8">
                        <span class="attribute-name">{{attribute.name != undefined ? attribute.name +':' : ''}}</span>
                        <span class="attribute-value"><el-link
                                :underline="false">{{attribute.value}}{{attribute.unit}}</el-link></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="dynamic-mini-container-footer">

            <div class="dynamic-basic-data">
                <span class=" dynamic-basic-data-col">
                    <el-avatar :size="20" :src="dynamic.userHeadUrl" class="dynamic-basic-data-avatar"></el-avatar>
                    <span class="dynamic-username">{{dynamic.userRealName}}</span>
                </span>
                <span class="dynamic-basic-data-col">{{dynamic.createTime  | formatDate }} </span>
                <!--<span  class="dynamic-basic-data-col">行业: <el-link href="/" :underline="false">{{dynamic.industryCategory}}</el-link></span>-->
            </div>
            <ul>
                <li @click="addLike(dynamic)" :class="dynamic.likeId != null ? 'is_active' : ''"><i
                        class="el-icon-third-good-fill "></i><span>{{dynamic.likeQuantity}}</span></li>
                <li @click="openDetails"><i
                        class="el-icon-third-comments-fill"></i><span>{{dynamic.commentQuantity}}</span></li>
                <li @click="addCollection(dynamic)" :class="dynamic.collectionId != null ? 'is_active' : ''"><i
                        class="el-icon-third-collection-fill"></i><span>{{dynamic.collectionId != null ? '取消' : '收藏'}}</span>
                </li>
                <li><i class="el-icon-third-resonserate-fill"></i><span>{{dynamic.shareQuantity}}</span></li>
            </ul>
        </div>
    </div>

</template>
<script>

    import {formatDate} from "@/utils/dateUtil"

    export default {
        name: "dynamic-mini-container",
        props: [
            'data'
        ],
        filters: {
            formatDate(val) {
                return formatDate(val)
            }
        },
        data: function () {
            return {
                layout: 0,//布局方式
                dynamic: {}
            }
        },
        methods: {
            openDetails() {
                let routeData = this.$router.resolve({
                    path: "/dynamic-details",
                    query:{ id : this.dynamic.id}
                });
                window.open(routeData.href, '_blank');
            },
            addLike(dynamic) {
                if (dynamic.likeId != null) {
                    this.$post("/dynamic/like/delete", {dynamicId: dynamic.id}).then(res => {
                        this.dynamic.likeId = null;
                        this.dynamic.likeQuantity = res.data;
                    })
                } else {
                    this.$post("/dynamic/like/add", {dynamicId: dynamic.id}).then(res => {
                        this.dynamic.likeId = 1;
                        this.dynamic.likeQuantity = res.data;
                    })
                }

            },
            addCollection(dynamic) {
                if (dynamic.collectionId != null) {
                    this.$post("/dynamic/collection/delete", {dynamicId: dynamic.id}).then(res => {
                        this.$set(dynamic, "collectionId", null)
                    })
                } else {
                    this.$post("/dynamic/collection/add", {dynamicId: dynamic.id}).then(res => {
                        this.$set(dynamic, "collectionId", 1)
                    })
                }

            }
        },
        created() {
            //初始化数据
            this.dynamic = this.data;
            if (this.dynamic.imageList == undefined) {
                this.dynamic.imageList = [];
            }
            if (this.dynamic.attributeList == undefined) {
                this.dynamic.attributeList = [];
            }else if(this.dynamic.attributeList.length%2 == 1){
                this.dynamic.attributeList.push({})
            }

            if (this.dynamic.attributeList.length > 1) {
                this.layout = 1;
            } else if (this.dynamic.imageList.length == 1) {
                this.layout = 2;
            } else if (this.dynamic.imageList.length > 1) {
                this.layout = 3;
            } else {
                this.layout = 0;
            }
            if (this.dynamic.subCategoryName) {
                this.dynamic.industryCategory = this.dynamic.parentCategoryName + " " + this.dynamic.subCategoryName + " "
            } else {
                this.dynamic.industryCategory = this.dynamic.parentCategoryName
            }


        }
    }
</script>
<style>
    .dynamic-mini-container {
        position: relative;
        margin-bottom: 10px;
        overflow: hidden;
        padding: 20px;
    }

    .dynamic-mini-container .dynamic-mini-container-body {
        font-size: 14px;
        line-height: 25px;
        cursor: pointer;
        overflow: hidden;
    }

    .dynamic-mini-container .el-card__body {
        overflow: hidden;
    }


    .dynamic-mini-container .dynamic-small-image {
        float: left;
        height: 120px;
    }

    .dynamic-mini-container .dynamic-small-image .el-image {
        margin-right: 5px;
        width: 154px;
        height: 120px;
    }

    .dynamic-mini-container .dynamic-big-image {
        float: left;
        margin-right: 10px;
        height: 100px;
    }

    .dynamic-mini-container .dynamic-big-image .el-image {
        width: 154px;
        height: 100px;
    }

    .dynamic-mini-container .dynamic-medium-image .el-image {
        width: 154px;
        height: 100px;
        margin-right: 5px;
    }

    .dynamic-mini-container .dynamic-medium-image .el-image:last-child {
        margin-right: 0px;
    }


    /**
      属性
     **/

    .dynamic-mini-container .goods-item-attribute ul {
        overflow: hidden;
        border-top: 1px solid #E4E7ED;
        border-left: 1px solid #E4E7ED;
        border-right: 1px solid #E4E7ED;
    }

    .dynamic-mini-container .goods-item-attribute li {
        font-size: 12px;
        float: left;
        width: calc(50% - 1px);
        border-bottom: 1px solid #E4E7ED;
        line-height: 29px;
        height: 29px;
        display: flex;
    }


    .dynamic-mini-container .goods-item-attribute li:nth-child(2n) {
        border-left: 1px solid #E4E7ED;
    }

    .dynamic-mini-container .attribute-value {
        width: 70%;
    }

    .dynamic-mini-container .attribute-value .el-link--inner {
        padding-left: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-overflow: ellipsis; /* IE/Safari */
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis; /* Opera */
        font-size: 12px;
        max-width: 172px;
    }

    .dynamic-mini-container .attribute-name {
        font-weight: 500;
        display: inline-block;
        width: 30%;
        text-align: right;
        background-color: #f9f9f9;
        padding-right: 5px;
        border-right: 1px solid #E4E7ED;
    }

    /**
    底部
    **/
    .dynamic-mini-container .dynamic-mini-container-footer {
        overflow: hidden;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }

    .dynamic-mini-container .dynamic-mini-container-footer ul {
        list-style: none;
        margin: 0px;
        color: #909399;
        line-height: 20px;
    }

    .dynamic-mini-container .dynamic-mini-container-footer li {
        float: left;
        margin-left: 15px;
        font-size: 12px;
        line-height: 20px;
        vertical-align: middle;
        cursor: pointer;

    }

    .dynamic-mini-container .dynamic-mini-container-footer .is_active {
        color: #1387E9 !important;
    }

    .dynamic-mini-container .dynamic-mini-container-footer li span {
        float: left;

    }

    .dynamic-mini-container .dynamic-mini-container-footer li i {
        font-size: 20px;
        float: left;
    }

    .dynamic-mini-container .dynamic-mini-container-footer li:hover {
        color: #1387E9;
    }

    /**
    个人信息
     */
    .dynamic-mini-container .dynamic-basic-data {
        line-height: 20px;
        font-size: 12px;
        display: inline-block;
        flex-direction: row;
        color: #909399;

    }


    .dynamic-mini-container .dynamic-basic-data .el-link--inner {
        font-size: 12px;
        color: #909399;
    }

    .dynamic-mini-container .dynamic-basic-data .el-link--inner:hover {
        color: #1387E9;
    }

    .dynamic-mini-container .dynamic-username {
        float: left;
    }

    .dynamic-mini-container .dynamic-basic-data .dynamic-basic-data-col {
        margin-right: 15px;
        float: left;
    }

    .dynamic-mini-container .dynamic-basic-data-avatar {
        margin-right: 5px;
        float: left;
    }

    .dynamic-mini-container .el-tag {
        margin-right: 2px;
    }

    /**
    标题
     */
    .dynamic-mini-container .dynamic-title {
        margin: 0;
        line-height: 24px;
        color: #303133;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .dynamic-mini-container .dynamic-title:hover {
        color: #1387E9;
    }

</style>